@extends('admin.common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/admin/jquery.lineProgressbar.css')}}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="{{url('js/jquery.lineProgressbar.js')}}" type="text/javascript"></script>
    <script src="{{url('js/echarts.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/jquery-ui-1.10.1.custom.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/amazeui.datetimepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/jquery.ui.datepicker-zh-CN.js')}}" type="text/javascript"></script>
    <style>
        .tbody-trend td{
            padding: 0;
            height: 55px;
        }
    </style>
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">数据统计</a>
        </div>
        <!-- cur-position end -->

        {{--<ul class="tab-nav clearfix">--}}
            {{--<li class="active"><a href="平台流水.html"><i class="icon tab-nav-4"></i>订单数据</a></li>--}}
            {{--<li><a href="粉丝数据.html"><i class="icon tab-nav-5"></i>粉丝数据</a></li>--}}
            {{--<li><a href="累计收入.html"><i class="icon tab-nav-6"></i>累计收入</a></li>--}}
        {{--</ul>--}}

        {{--<ul class="charts-menu clearfix">--}}
            {{--<li class="active"><a href="">今日：0 </a></li>--}}
            {{--<li class=""><a href="">昨日：0 </a></li>--}}
            {{--<li class=""><a href="">周：1 </a></li>--}}
            {{--<li class="all"><a href="javascript:void(0);">总计：15</a></li>--}}
        {{--</ul>--}}

        <h3 class="zb-head">用户数据指标</h3>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>今日新增用户</th>
                    <th>昨日新增用户</th>
                    <th>本月新增用户</th>
                    <th>总用户数</th>
                </tr>
                </thead>
                <tbody class="tbody-trend">
                <tr style="height: 55px">
                    <td class="first">
                        <span class="head">{{$today_users_count}}</span>
                    </td>
                    <td>
                        <span class="head">{{$yesterday_users_count}}</span>
                    </td>
                    <td>
                        <span class="head">{{$mount_users_count}}</span>
                    </td>
                    <td>
                        <span class="head" style="color: #108604">{{$all_users_count}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <h3 class="zb-head">订单数据指标</h3>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>今日新增订单</th>
                    <th>今日收入</th>
                    <th>昨日新增订单</th>
                    <th>昨日收入</th>
                    <th>本月新增订单</th>
                    <th>本月收入</th>
                    <th>总订单</th>
                    <th>总收入</th>
                </tr>
                </thead>
                <tbody class="tbody-trend">
                <tr>
                    <td class="first">
                        <span class="head">{{$today_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥@if(!is_null($today_order_sum)){{$today_order_sum}}@else 0 @endif</span>
                    </td>
                    <td>
                        <span class="head">{{$yesterday_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥@if(!is_null($yesterday_order_sum)){{$yesterday_order_sum}}@else 0 @endif</span>
                    </td>
                    <td>
                        <span class="head">{{$month_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥@if(!is_null($month_order_sum)){{$month_order_sum}}@else 0 @endif</span>
                    </td>
                    <td>
                        <span class="head" style="color: #108604">{{$all_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head" style="color: #108604">￥@if(!is_null($all_order_sum)){{$all_order_sum}}@else 0 @endif</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        {{--性别比例--}}
        <h3 class="zb-head">用户性别比例</h3>
        <div class="htmleaf-content" style="margin-top: 20px">
            <h3 class="center">未知性别</h3>
            <div id="progressbar1"></div>
            <h3 class="center">男</h3>
            <div id="progressbar2"></div>
            <h3 class="center">女</h3>
            <div id="progressbar3"></div>
        </div>

        <div class="filter-box mt20">
            <div id="chartsBox2" class="chartsBox" style="-webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);">
            </div>
        </div>

        <div class="filter-box mt20">
            <span class="tab-time ml10">
                <span class="filter-tit">查询日期：</span>
                <input type="text" id="select_time" class="gg-time Wdate" name="st" placeholder="请选择时间" value="{{$select_time}}">
                <input type="button" id="timesBet" value="查询" class="inquiry-btn">
            </span>
            <div id="chartsBox" class="chartsBox" style="-webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);">
            </div>
        </div>
        <!-- content end -->
    </div>
        <script>
            $(function () {
                $('#progressbar1').LineProgressbar({
                    percentage: "{{$sex_one_ratio}}"
                });
                $('#progressbar2').LineProgressbar({
                    percentage: "{{$sex_man_ratio}}",
                    fillBackgroundColor: '#1abc9c'
                });
                $('#progressbar3').LineProgressbar({
                    percentage: "{{$sex_won_ratio}}",
                    fillBackgroundColor: '#e67e22'
                });


                $('#timesBet').click(function () {
                    var date = $('#select_time').val();
                    window.location.href="{{route('Admin.Home.dataShow')}}?select_time="+date;
                });

                jQuery('#select_time').datepicker({
                    dateFormat: "yy-mm-dd",
                });

                var myChart = echarts.init(document.getElementById('chartsBox'));

                var hoursData = [];
                @foreach($hour_nums as $hourNum)
                hoursData.push("{{$hourNum}}");
                @endforeach
                {{--var hoursData = [];--}}
                {{--@foreach($hour_nums as $hourNum)--}}
                    {{--var d = ["{{$hourNum['time']}}","{{$hourNum['num']}}"];--}}
                    {{--hoursData.push(d);--}}
                {{--@endforeach--}}

                // hoursData.push(['2018-02-08 09:00:00','3'],['2018-02-08 10:00:00','5']);

                var selectTime = "{{$select_time}}";
                var title = '';
                function setTitle(selectTime) {
                    if(selectTime == ''){
                        title = "今日访问量";
                    }else {
                        title = selectTime+"访问量";
                    }
                }
                setTitle(selectTime);

                option = {
                    title: {
                        text: title
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data:['访问量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            name : '时',
                            type : 'category',
                            boundaryGap : false,
                            data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
                        }
                    ],
                    yAxis : [
                        {
                            name : '访问次数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'访问量',
                            type:'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            lineStyle: {normal:{
                                color: '#12aebf'
                            }},
                            areaStyle: {normal: {
                                color: '#96bfbc'
                            }},
                            data:hoursData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);


                var myChart2 = echarts.init(document.getElementById('chartsBox2'));

                var oneHoursData = [];
                @foreach($one_hour_nums as $one_hour_num)
                   var d = ["{{$one_hour_num['time']}}","{{$one_hour_num['num']}}"];
                oneHoursData.push(d);
                @endforeach

                option2 = {
                    title: {
                        text: "每小时访问量"
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    legend: {
                        data:['访问量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            name : '时',
                            type : 'time',
                            // boundaryGap : false,
                            // data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
                        }
                    ],
                    yAxis : [
                        {
                            name : '访问次数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'访问量',
                            type:'line',
                            stack: '总量',
                            showSymbol: false,
                            hoverAnimation: false,
                            // label: {
                            //     normal: {
                            //         show: true,
                            //         position: 'top'
                            //     }
                            // },
                            // lineStyle: {normal:{
                            //         color: '#12aebf'
                            //     }},
                            // areaStyle: {normal: {
                            //         color: '#96bfbc'
                            //     }},
                            data:oneHoursData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);

                var nowTime = getFormatDate();
                setInterval(function () {
                    console.log(nowTime);
                    getNewData(nowTime);
                    nowTime = getFormatDate();
                }, 5000);


                function loadNewData(newData) {
                    var a = [newData['time'],newData['num']];
                    // for(var i=0;i<2;i++){
                        oneHoursData.push(a);
                    // }


                    myChart2.setOption({
                        series: [{
                            data: oneHoursData
                        }]
                    });
                }

                function getNewData(time) {
                    $.ajax({
                        url:"{{route('Api.Admin.Page.getNewData')}}",
                        type:"post",
                        dataType:'json',
                        data:{last_time:time},
                        success:function (obj) {
                            if(obj.level == 'success'){
                                loadNewData(obj.data);
                            }else {
                                console.log(obj);
                            }
                        },
                        error:function (obj) {
                            console.log(obj)
                        }
                    });
                }

                function getFormatDate(){
                    var nowDate = new Date();
                    var year = nowDate.getFullYear();
                    var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
                    var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
                    var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours();
                    var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
                    var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
                    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
                }
            });
        </script>
@endsection